<template>
	<view class="content">
		<view class="top">
			<view class="t1">
				￥{{content.order.payAmount}}
			</view>
			<view class="t2">
				<text>支付剩余时间：{{countdown}}</text>
			</view>
		</view>
		<view class="bot">
			<view class="t1">
				请选择支付方式
			</view>
			<view class="t2">
				<image src="/static/wxp.png" mode="" class="i1"></image>
				<text>微信支付</text>
				<image src="/static/d1.png" mode="" class="i2"></image>
			</view>
		</view>
		<view class="button" @click="handleToSuccess">
			立即支付
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				content:'',
				countdown: '',
				timer: null,
				back:false
			}
		},
		onLoad() {
			const result = JSON.parse(uni.getStorageSync('payInfo'))
			this.content = result
			this.startCountdown();
		}, 
		onUnload() {
			if(!this.back){
				uni.reLaunch({
				   url:"/pages/order/index"
				})
			} 
		    // 页面卸载时清除定时器
		    if (this.timer) {
		      clearInterval(this.timer);
		    }
		},
		methods:{
			 startCountdown() {
			  // 将字符串时间转换为 Date 对象
			  const futureTime = new Date(this.content.order.orderCloseTime.replace(/-/g, '/'));
			  // 获取未来时间的时间戳
			  const futureTimestamp = futureTime.getTime();
			  this.timer = setInterval(() => {
				// 获取当前时间的时间戳
				const currentTimestamp = new Date().getTime();
				// 计算剩余的毫秒数
				const remainingTime = futureTimestamp - currentTimestamp;
				if (remainingTime > 0) {
				  // 将剩余的毫秒数转换为天、小时、分钟和秒
				  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
				  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
				  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
				  // 格式化倒计时显示
				  this.countdown = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
				} else {
				  // 倒计时结束，清除定时器
				  clearInterval(this.timer);
				  this.countdown = '已结束';
				}
			  }, 1000);
			},
			handleToSuccess(){
				uni.requestPayment({
					timeStamp: this.content.payInfo.timeStamp,
					nonceStr: this.content.payInfo.nonceStr,
					package: this.content.payInfo.package,
					signType: this.content.payInfo.signType,
					paySign: this.content.payInfo.paySign,
					success: (res) => {
						uni.showToast({
							title: '支付成功'
						}) 
						this.back = true
						uni.removeStorageSync('payInfo')
						uni.removeStorageSync('confirmOrderInfo')
						setTimeout(()=>{
							uni.navigateTo({
								url:`./success?orderId=${this.content.order.id}`
							})
						},1000)
					},
					fail:(res) => { 
						if(res.errMsg == 'requestPayment:fail cancel'){
							uni.showToast({
								title:'取消支付',
								icon:'none'
							})
							
							this.back = true
							uni.removeStorageSync('payInfo')
							uni.removeStorageSync('confirmOrderInfo')
							setTimeout(()=>{
								uni.navigateTo({
									url:`./fail?orderId=${this.content.order.id}`
								})
							},500)
						 } 
					  }
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 50rpx;
		box-sizing: border-box;
		padding-top: 100rpx;
		.button{
			display: block;
			margin: 0 auto;
			margin-top: 270rpx;
			width: 590rpx;
			height: 98rpx;
			background: linear-gradient( 90deg, #363330 0%, #12100E 100%);
			border-radius: 49rpx;
			text-align: center;
			line-height: 98rpx;
			color: #fff;
			font-size: 32rpx;
		}
		.bot{
			margin-top: 60rpx;
			.t1{
				font-size: 32rpx;
				color: #020202;
				font-weight: bold;
				padding-bottom: 32rpx;
				margin-bottom: 44rpx;
				border-bottom: 1px solid #e8e8e8;
			}
			.t2{
				display: flex;
				align-items: center;
				.i1{
					width: 44rpx;
					height: 39rpx;
					margin-right: 20rpx;
				}
				text{
					font-size: 28rpx;
					color: #020202;
				}
				.i2{
					margin-left: auto;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.top{
			.t1{
				font-size: 60rpx;
				text-align: center;
						font-family: 'DINPro-Medium';
				color: #020202;
			}
			.t2{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				text{
					display: inline-block; 
					height: 66rpx;
					padding: 0 30rpx;
					line-height: 66rpx;
					font-size: 24rpx;
					color: #020202;
					background: #F8F8F8;
					border-radius: 33rpx;
				}
			}
		}
	}
</style>